<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/5.16.0/load-image.all.min.js"></script>

        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>

        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" />

        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
    </head>
    <body style="background-color:#232323;">
        <div style="left:50%; position:absolute; top:50%; transform:translate(-50%, -50%);">
            <table style="margin:0px auto 0px auto; vertical-align:middle;">
                <tbody>
                    <tr>
                        <td>
                            <div style="padding:40px 20px 40px 40px;">
                                <div style="background-color:#1D1D1D; border:1px solid #2A2A2A; display:inline-block; width:480px; height:360px;">
                                    <img id="from" src="" />
                                </div>
                            </div>
                            <div style="padding:40px 20px 40px 40px;">
                                <div style="background-color:#1D1D1D; border:1px solid #2A2A2A; display:inline-block; width:480px; height:360px;">
                                    <img id="to" src="" />
                                </div>
                            </div>
                        </td>
                        <td>
                            <div style="padding:20px 20px 20px 20px; width:100px;">
                                <button class="btn btn-primary" id="plause" style="display:inline-block; font-size:24px; padding:10px 20px 10px 20px; width:100%;"><i class="fa-solid fa-play"></i></button>
                            </div>
                        </td>
                        <td>
                            <div style="padding:40px 40px 40px 20px;">
                                <div style="background-color:#1D1D1D; border:1px solid #2A2A2A; display:inline-block;">
                                    <img src="/get_live" />
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div style="bottom:16px; position:fixed; right:16px;">
            <button class="btn btn-primary" id="autozoom" style="font-size:14px; position:relative; z-index:2;"><i class="fa-solid fa-wand-magic"></i></button>
            <button class="btn btn-primary" id="load" style="font-size:14px; position:relative;"><i class="fa-solid fa-folder-open"></i><input id="file" type="file" style="cursor:pointer; bottom:0px; height:100%; left:0px; opacity:0.0; position:absolute; right:0px; top:0px; width:100%; z-index:1;" /></button>
            <a class="btn btn-primary" id="save" href="/get_result" target="_blank" style="font-size:14px; position:relative; z-index:2;"><i class="fa-solid fa-floppy-disk"></i></a>
        </div>

        <script type="text/javascript">
            var objFrom = null;
            var objTo = null;
        </script>

        <script type="text/javascript">
            jQuery(window.document)
                .on('keydown', function(objEvent) {
                    if (objEvent.keyCode === 49) {
                        console.log(JSON.stringify({
                            'strFile': jQuery('#file').get(0).files[0].name,
                            'objFrom': {
                                'fltCenterU': objFrom.getData().x + (0.5 * objFrom.getData().width),
                                'fltCenterV': objFrom.getData().y + (0.5 * objFrom.getData().height),
                                'intCropWidth': objFrom.getData().width,
                                'intCropHeight': objFrom.getData().height
                            },
                            'objTo': {
                                'fltCenterU': objTo.getData().x + (0.5 * objTo.getData().width),
                                'fltCenterV': objTo.getData().y + (0.5 * objTo.getData().height),
                                'intCropWidth': objTo.getData().width,
                                'intCropHeight': objTo.getData().height
                            }
                        }));
                    }
                })
            ;

            jQuery('#plause')
                .on('click', function() {
                    if (jQuery('#plause').find('i').hasClass('fa-play') === true) {
                        jQuery('#plause').find('i').removeClass().addClass('fa-solid').addClass('fa-pause');
                        jQuery.post('/update_mode', { 'strMode': 'automatic' });

                    } else if (jQuery('#plause').find('i').hasClass('fa-pause') === true) {
                        jQuery('#plause').find('i').removeClass().addClass('fa-solid').addClass('fa-play');
                        jQuery.post('/update_mode', { 'strMode': 'manual' });

                    }
                })
            ;

            jQuery('#autozoom')
                .on('click', function() {
                    jQuery('#plause').find('i').removeClass().addClass('fa-solid').addClass('fa-play');
                    jQuery.post('/update_mode', { 'strMode': 'manual' });

                    jQuery.post('/autozoom', {}, function(objData) {
                        objFrom.setData({
                            'x': objData.objFrom.fltCenterU - (objData.objFrom.intCropWidth / 2.0),
                            'y': objData.objFrom.fltCenterV - (objData.objFrom.intCropHeight / 2.0),
                            'width': objData.objFrom.intCropWidth,
                            'height': objData.objFrom.intCropHeight,
                            'rotate': 0.0,
                            'scaleX': 1.0,
                            'scaleY': 1.0
                        });

                        objTo.setData({
                            'x': objData.objTo.fltCenterU - (objData.objTo.intCropWidth / 2.0),
                            'y': objData.objTo.fltCenterV - (objData.objTo.intCropHeight / 2.0),
                            'width': objData.objTo.intCropWidth,
                            'height': objData.objTo.intCropHeight,
                            'rotate': 0.0,
                            'scaleX': 1.0,
                            'scaleY': 1.0
                        });

                        window.setTimeout(function() {
                            jQuery('#plause').find('i').removeClass().addClass('fa-solid').addClass('fa-pause');
                            jQuery.post('/update_mode', { 'strMode': 'automatic' });
                        }, 500);
                    });
                })
            ;

            jQuery('#file')
                .on('click', function(objEvent) {
                    objEvent.stopPropagation();
                })
                .on('change', function(objEvent) {
                    if (objEvent.target.files.length !== 1) {
                        return;
                    }

                    loadImage(objEvent.target.files[0], function(objImage) {
                        jQuery('#plause').find('i').removeClass().addClass('fa-solid').addClass('fa-play');
                        jQuery.post('/update_mode', { 'strMode': 'manual' });

                        jQuery('#from, #to')
                            .attr('src', objImage.toDataURL())
                        ;

                        if (objFrom !== null) {
                            objFrom.destroy();
                        }

                        if (objTo !== null) {
                            objTo.destroy();
                        }

                        objFrom = new Cropper(jQuery('#from').get(0), {
                            'aspectRatio': 4.0 / 3.0,
                            'guides': false,
                            'minCropBoxWidth': 120.0,
                            'viewMode': 3,
                            'zoomOnWheel': false,
                            'ready': function() {
                                objFrom.setData({
                                    'x': (1024 - 900) / 2,
                                    'y': (768 - 675) / 2,
                                    'width': 900,
                                    'height': 675,
                                    'rotate': 0.0,
                                    'scaleX': 1.0,
                                    'scaleY': 1.0
                                });

                                objFrom.options.crop();
                            },
                            'crop': function() {
                                jQuery('#plause').find('i').removeClass().addClass('fa-solid').addClass('fa-play');
                                jQuery.post('/update_mode', { 'strMode': 'manual' });

                                jQuery.post('/update_from', {
                                    'fltCenterU': objFrom.getData().x + (0.5 * objFrom.getData().width),
                                    'fltCenterV': objFrom.getData().y + (0.5 * objFrom.getData().height),
                                    'intCropWidth': Math.round(objFrom.getData().width),
                                    'intCropHeight': Math.round(objFrom.getData().height)
                                });
                            }
                        });

                        objTo = new Cropper(jQuery('#to').get(0), {
                            'aspectRatio': 4.0 / 3.0,
                            'guides': false,
                            'minCropBoxWidth': 120.0,
                            'viewMode': 3,
                            'zoomOnWheel': false,
                            'ready': function() {
                                objTo.setData({
                                    'x': (1024 - 900) / 2,
                                    'y': (768 - 675) / 2,
                                    'width': 900,
                                    'height': 675,
                                    'rotate': 0.0,
                                    'scaleX': 1.0,
                                    'scaleY': 1.0
                                });

                                objTo.options.crop();
                            },
                            'crop': function() {
                                jQuery('#plause').find('i').removeClass().addClass('fa-solid').addClass('fa-play');
                                jQuery.post('/update_mode', { 'strMode': 'manual' });

                                jQuery.post('/update_to', {
                                    'fltCenterU': objTo.getData().x + (0.5 * objTo.getData().width),
                                    'fltCenterV': objTo.getData().y + (0.5 * objTo.getData().height),
                                    'intCropWidth': Math.round(objTo.getData().width),
                                    'intCropHeight': Math.round(objTo.getData().height)
                                });
                            }
                        });

                        jQuery.post('/load_image', {
                            'strFile': objEvent.target.files[0].name,
                            'strData': objImage.toDataURL()
                        })
                    }, {
                        'canvas': true,
                        'minWidth': 1024,
                        'maxWidth': 1024,
                        'minHeight': 768,
                        'maxHeight': 768,
                        'crop': true
                    });
                })
                .parent()
                    .on('click', function() {
                        jQuery('#file').click();
                    })
                .end()
            ;
        </script>
    </body>
</html>